// event loop 事件循环；

/**
 * 1. 进程？ 线程？
 * 什么进程？工厂   --> os
 * 什么线程？生成线  ->  做功
 *
 * 8g 16g;
 *
 * js 单线程语言？同一个时间做一个事情
 *
 * 2. 同步异步？
 *
 * 任务： 渲染 - http - dom事件 - 定时器 - 动画
 *
 *  渲染任务： （1， 2 属于互斥线程）
 *  1. 渲染线程：  GPU/CPU    图形渲染
 *  2. 解析器线程： V8引擎      解析器 （js）
 *
 *  异步任务：
 *  3. http线程： 前后端交互   axios.get('').then(res => {})
 *  4. 定时器线程：           setTimeout(() => {}, 1000)
 *  5. 事件：onclick / ...   dom.onclick = function() {}
 *
 *
 * 同步？
 *
 * 3. 异步解决方案？(5种解决方案)
 *   回调函数
 *   promise/ * / async
 *   事件监听
 *
 * 4. 区分异步任务？宏任务 / 微任务
 *
 *   定时器 宏
 *   .then/catch/finally 微
 *
 * 5. 如何执行？ event loop
 *
 *  执行栈 ： 执行代码，栈结构（先进后出）
 *
 *  宏任务：
 *
 *  微任务：
 *
 * 6. 任务拆分执行：(异步任务-宏-微)
 * 任务： ---> 任务进栈 ---> 分配任务 （如果碰到同步任务，立马执行，如果碰到异步任务，拆分任务，
 * 宏任务---> 执行且让宏任务出栈，将callback放在宏任务对列中，等待执行结果，如果碰到微任务，将整个微任务放在微任务队列中）
 *
 * 7. 执行：
 *
 *  同步任务：
 *    ｜
 *  微任务 结束：事件循环第一轮结束了； .then / catch / finally
 *    ｜
 *  宏任务   callback: 第二轮结束
 *
 *    |
 *
 *  拿到结果，回到执行栈，将结果在执行栈弹出；
 *
 *
 */

console.log("1"); // 1. 同步

setTimeout(() => {
  // 宏
  console.log(2);
}, 0);

auto();

async function auto() {
  console.log(7);
  await auto2();
  console.log("8");
}
async function auto2() {
  await console.log(9);
  console.log("10");
}

new Promise((resolve, reject) => {
  resolve();
  console.log(3); // 2. 同步任务
})
  .then((res) => {
    console.log(4); // 微任务
  })
  .finally((res) => {
    console.log("5"); // 微任务
  });

console.log("6"); // 3. 同步任务

// 1 3 6 4 5 2

// 拆分任务： 同步任务 / 宏任务 / 微任务
